<template>
  <div style="margin-inline: 40px">
    <t-row class="rows">
      <t-col :span="col1Span">
        <span>设备名称</span>
      </t-col>
      <t-col :span="2" class="rightCols">
        <span>{{ currDeviceStored.name }}</span>
      </t-col>

    </t-row>
    <t-row class="rows">
      <t-col :span="col1Span">
        <span>序列号</span>
      </t-col>
      <t-col :span="2" class="rightCols">
        <span>{{ currDeviceStored.device_number }}</span>
      </t-col>
    </t-row>

    <t-row class="rows">
      <t-col :span="col1Span">
        <span>联网状态</span>
      </t-col>
      <t-col :span="2" class="rightCols">
        <span>{{ currDeviceStored.is_online?"在线":"离线" }}
          <LinkIcon v-if="currDeviceStored.is_online" size="1.5em" style="color: dodgerblue" />
          <LinkUnlinkIcon size="1.5em" v-else style="color: indianred;"/>
        </span>
      </t-col>
    </t-row>

    <t-row class="rows">
      <t-col :span="col1Span">
        <span>最近更新时间</span>
      </t-col>
      <t-col :span="2" class="rightCols">
        <span>{{ new Date(currDeviceStored.last_active_time).toLocaleString() }}</span>
      </t-col>
    </t-row>

    <t-row class="rows">
      <t-col :span="col1Span">
        <span>创建时间</span>
      </t-col>
      <t-col :span="2" class="rightCols">
        <span>{{ new Date(currDeviceStored.create_time).toLocaleString() }}</span>
      </t-col>
    </t-row>

    <t-row class="rows">
      <t-col :span="col1Span">
        <span>数据维度</span>
      </t-col>
      <t-col :span="2" class="rightCols">
        <span>{{ currDeviceStored.dimensions.join(", ") }}</span>
      </t-col>
    </t-row>

    <t-row class="rows">
      <t-col :span="col1Span">
        <span>设备位置</span>
      </t-col>
      <t-col :span="2" class="rightCols">
        <span>{{ currDeviceStored.location }}</span>
      </t-col>
    </t-row>
  </div>
</template>

<script lang="ts" setup>
import {useStore} from "vuex";
import {computed, reactive} from "vue";
import * as DevicesResponse from "../class/DevicesResponse";
import {LinkIcon, LinkUnlinkIcon} from "tdesign-icons-vue-next";

const store = useStore();
const currDeviceStored = computed<DevicesResponse.Device>(() => store.getters["Devices/getCurrDevice"]);
// const currDevice = reactive({ device: new DevicesResponse.Device() });
const col1Span = 2
</script>

<style scoped>
.rows {
  margin-block: 10px;
}

.rightCols {
  text-align: right;
}
</style>